<template>
  <!-- 预警决策主页-缺陷与隐患部分缺陷饼图 -->
  <div class="defectspie">
    <div class="defectspie-top">
      <div class="defectspie-top-info">
        <div class="infotext">缺陷总数</div>
        <div class="infonumber" @click="goDefectsPage('no')">{{newdefectList.total}}</div>
      </div>
      <div class="defectspie-top-info">
        <div class="infotext">今日计划消缺</div>
        <div class="infonumber" @click="goDefectsPage('today')">{{newdefectList.todayTotal}}</div>
      </div>
    </div>
    <div class="defectspie-pie">
      <v-chart :options="newOption" :auto-resize="true" @click="goDefectsPageTwo" />
    </div>
    <div class="defectspie-bottom">
      <div class="bottom-box">
        <div class="artificial">
          <div class="artificial-react artificial-normal"></div>
          <div>人工·一般</div>
        </div>
        <div class="artificial">
          <div class="artificial-react artificial-serious"></div>
          <div>人工·严重</div>
        </div>
        <div class="artificial">
          <div class="artificial-react artificial-critical"></div>
          <div>人工·危急</div>
        </div>
        <div class="artificial">
          <div class="artificial-react artificial-normal-auto"></div>
          <div>自动·一般</div>
        </div>
        <div class="artificial">
          <div class="artificial-react artificial-serious-auto"></div>
          <div>自动·严重</div>
        </div>
        <div class="artificial">
          <div class="artificial-react artificial-critical-auto"></div>
          <div>自动·危急</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
//loadsh
import lodash from "lodash";
interface tabItem {
  index: number;
  id: string;
  name: string;
  active: Boolean;
}
interface dataList {
  name: string;
  value: string;
  itemStyle: object;
}
let colorList: Array<string> = ["#CA3834", "#CD7A26", "#115AD6"];
@Component
export default class DefectsPie extends Vue {
  @Prop({ default: () => [] })
  defectCount: Array<string> | undefined;
  @Prop({ default: () => {} })
  defectStatistics;
  // tabs数据集合
  tabsDataList: tabItem[] = [
    {
      index: 0,
      id: "rgfx",
      name: "人工发现",
      active: true,
    },
    {
      index: 1,
      id: "zdxj",
      name: "自动巡检",
      active: false,
    },
  ];
  public dataList: dataList[] = [
    {
      name: "一般",
      value: "3515",
      itemStyle: {
        normal: {
          color: "#06A3F4",
        },
      },
    },
    {
      name: "严重",
      value: "2154",
      itemStyle: {
        normal: {
          color: "#E58B44",
        },
      },
    },
    {
      name: "危急",
      value: "3854",
      itemStyle: {
        normal: {
          color: "#FF3939",
        },
      },
    },
  ];

  // 数字跳转到缺陷二级页面
  private goDefectsPage(v: any) {
    // console.log("v:",v);
    if (v == "today") {
      let date = new Date();
      let month =
        Number(date.getMonth() + 1) < 10
          ? "0" + Number(date.getMonth() + 1)
          : Number(date.getMonth() + 1);
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let plantime = date.getFullYear() + "-" + month + "-" + day;
      // console.log("plantime:",plantime);
      this.$router.push({
        name: "defectsindex",
        params: {
          plantime: plantime,
        },
      });
    } else {
      this.$router.push({
        name: "defectsindex",
        params: {
          isClear: "未消缺",
        },
      });
    }
  }
  // pie跳转到缺陷二级页面
  private goDefectsPageTwo(v: any) {
    let typename = v.name.slice(5)
    let defectsType = "";
    if (typename == "一般") {
      defectsType = "03";
    } else if (typename == "严重") {
      defectsType = "02";
    } else if (typename == "危急") {
      defectsType = "01";
    }
    this.$router.push({
      name: "defectsindex",
      params: {
        findStyle: "0",
        defectsType: defectsType,
      },
    });
  }

  get newdefectList() {
    let defectList = this.defectCount;
    return defectList;
  }

  get newOption() {
    let option = lodash.cloneDeep(this.option);
    let robotInspection = this.defectStatistics;
    // var dataList = [];
    // 人工发现
    let dataList = [
      {
        name: "人工巡视·一般",
        value: robotInspection.rgybqx || 0,
        itemStyle: {
          normal: {
            color: "#06A3F4",
          },
        },
      },
      {
        name: "人工巡视·严重",
        value: robotInspection.rgyzqx || 0,
        itemStyle: {
          normal: {
            color: "#E58B44",
          },
        },
      },
      {
        name: "人工巡视·危急",
        value: robotInspection.rgwjqx || 0,
        itemStyle: {
          normal: {
            color: "#FF3939",
          },
        },
      },
      {
        name: "自动巡检·一般",
        value: robotInspection.zdybqx || 0,
        itemStyle: {
          normal: {
            color: "#06A3F4",
          },
        },
      },
      {
        name: "自动巡检·严重",
        value: robotInspection.zdyzqx || 0,
        itemStyle: {
          normal: {
            color: "#E58B44",
          },
        },
      },
      {
        name: "自动巡检·危急",
        value: robotInspection.zdwjqx || 0,
        itemStyle: {
          normal: {
            color: "#FF3939",
          },
        },
      },
    ];
    (option as any).series[0].data = dataList;

    return option;
  }

  public option: EChartOption = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: false,
      orient: "horizontal",
      left: "left",
      bottom: "10%",
      itemWidth: 10, // 设置图例图形的宽
      itemHeight: 18, // 设置图例图形的高
      textStyle: {
        color: "#ffffff", // 图例文字颜色
      },
      itemGap: 5,
      data: ["一般", "严重", "危急"],
    },

    series: [
      {
        type: "pie",
        radius: ["28%", "58%"],
        center: ["50%", "50%"],
        hoverAnimation: false,
        label: {
          normal: {
            formatter: function (params: any) {
              return "{white|" + params.value + "}";
            },
            rich: {
              white: {
                color: "#ffffff",
                fontSize: 15,
                // padding: [21, 0],
                align: "center",
              },
            },
          },
        },
        labelLine: {
          normal: {
            length: 10,
            length2: 4,
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        data: [0, 0, 0],
      },
      {
        type: "pie",
        name: "最外层细圆环",
        hoverAnimation: false,
        radius: ["63%", "63%"],
        center: ["50%", "50%"],
        itemStyle: {
          normal: {
            borderColor: "#0C4CBF",
            borderWidth: 1,
          },
        },
        label: {
          show: false,
        },
        data: [100],
      },
    ],
  };
}
</script>

<style lang="scss" scoped>
.defectspie {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &-top {
    width: 100%;
    height: 1rem;
    padding-top: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 16px;
    &-info {
      display: flex;
      // justify-content: space-around;
      .infotext {
        width: 45%;
        height: 0.26rem;
        line-height: 0.26rem;
        text-align: right;
        // background-color: gray;
      }
      .infonumber {
        width: 0.62rem;
        height: 0.26rem;
        margin-left: 0.19rem;
        text-align: center;
        line-height: 0.22rem;
        // background-color: greenyellow;
        border: 0.02rem solid #07a3b6;
        box-shadow: 0 0 0.05rem #07a3b6 inset;
      }
    }
  }
  &-bottom {
    width: 100%;
    height: 0.65rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.12rem;
    padding-bottom: 0.21rem;
    .bottom-box {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .artificial {
        width: 30%;
        display: flex;
        line-height: 0.26rem;
        &-react {
          width: 0.15rem;
          height: 0.15rem;
          margin: 0.05rem;
        }
        &-normal {
          background-color: #1466f7;
        }
        &-serious {
          background-color: #f79928;
        }
        &-critical {
          background-color: #fc3c2d;
        }
        &-normal-auto {
          background-color: #3cdd72;
        }
        &-serious-auto {
          background-color: #2eefe9;
        }
        &-critical-auto {
          background-color: #ddcf22;
        }
      }
    }
  }
  &-pie {
    width: 100%;
    height: calc(100% - 1.65rem);
    .echarts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>